<!-- 业务消息 -->
<template>
  <div>
    <el-badge :value="unRead" :hidden="unRead < 1" :max="99" style="line-height: 35px;">
      <el-popover trigger="hover" :open-delay="500">
        <el-table :data="noticeList" :show-header="false" empty-text="暂无消息">
          <el-table-column label="内容" min-width="180">
            <template slot-scope="scope">
              <span :class="scope.row.state == '0' ? 'content-span' : 'is-read'" @click="goto(scope.row)">{{ scope.row.content }}</span>
              <br/>
              <span :class="scope.row.state == '0' ? 'createTime-span createTime-fs' : 'is-read createTime-fs'">{{ scope.row.createTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="state" align="right" width="100">
            <template slot-scope="scope">
              <el-button v-if="scope.row.state == '0'" type="text" @click="isRead(scope.row)">标为已读</el-button>
              <el-button v-else type="text" disabled>已读</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div>
          <el-button class="more-but" v-if="showMore" type="text" @click="showM">查看更多</el-button>
        </div>
        <i class="el-icon-bell" slot="reference"></i>
      </el-popover>
    </el-badge>

    <!-- 更多消息 -->
    <el-dialog :visible.sync="open" width="600px" append-to-body :close-on-click-modal="false">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="el-icon-check"
            size="mini"
            :disabled="unRead < 1"
            @click="allRead"
          >全部已读</el-button>
        </el-col>
      </el-row>
      <el-table :data="noticeMoreList" v-loading="loading" :show-header="false" empty-text="暂无消息">
        <el-table-column label="内容" min-width="180">
          <template slot-scope="scope">
            <span :class="scope.row.state == '0' ? 'content-span' : 'is-read'" @click="goto(scope.row)">{{ scope.row.content }}</span>
            <br/>
            <span :class="scope.row.state == '0' ? 'createTime-span createTime-fs' : 'is-read createTime-fs'">{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="state" align="right" width="100">
          <template slot-scope="scope">
            <el-button v-if="scope.row.state == '0'" type="text" @click="isRead(scope.row)">标为已读</el-button>
            <el-button v-else type="text" disabled>已读</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryMoreParams.current"
        :limit.sync="queryMoreParams.size"
        @pagination="getNoticeMoreList"
      />
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { listNotice, getUnReadNum, read, reads } from '@/api/tws/notice';
import { playAudio } from '@/utils/audio';

export default {
  name: 'TwsNotice',
  data () {
    return {
      // 查询参数
      queryParams: {
        current: 1,
        size: 5
      },
      // 查询参数
      queryMoreParams: {
        current: 1,
        size: 10
      },
      unRead: 0,  // 未读消息数
      total: 0,
      // 遮罩层
      loading: true,
      open: false,
      showMore: false,  // 查看更多
      noticeList: [],
      noticeMoreList: []
    }
  },
  computed: {
    ...mapGetters([
      'wsMsg'
    ])
  },
  watch: {
    // websocket实现实时通知
    wsMsg: function(newData, oldData) {
      if(newData && newData == this.$store.state.constants.ws_msg_type_refreshBusiness) {
        this.getData();
        this.$notify.info({
          title: '消息',
          message: '您有新的消息',
          offset: 80,
          duration: 3000
        });
        // 播放提示音
        playAudio();
      }
    }
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.getUnRead();
      this.getNoticeList();
    },
    // 查询未读消息数量
    getUnRead() {
      getUnReadNum().then(res => {
        this.unRead = res.data;
      }).catch(err => {
      })
    },
    // 消息通知
    getNoticeList() {
      listNotice(this.queryParams).then(res => {
        this.noticeList = res.rows;
        this.showMore = res.total > this.queryParams.size;
      }).catch(err => {
      })
    },
    // 更多消息通知
    getNoticeMoreList() {
      this.loading = true;
      listNotice(this.queryMoreParams).then(res => {
        this.noticeMoreList = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },
    // 查看更多
    showM() {
      this.total = 0;
      this.noticeMoreList = [];
      this.open = true;
      this.queryMoreParams.current = 1;
      this.queryMoreParams.size = 10;
      this.getNoticeMoreList();
    },
    // 标为已读
    isRead(row) {
      read(row.id).then(res => {
      }).finally(() => {
        this.getData();
        if(this.open) {
          this.getNoticeMoreList();
        }
      })
    },
    // 全部已读
    allRead() {
      reads().then(res => {
      }).finally(() => {
        this.getData();
        if(this.open) {
          this.getNoticeMoreList();
        }
      })
    },
    // 点击消息，跳转页面
    goto(row) {
      // 已读消息不跳转
      if(row.state == '1') {
        return
      }
      if(this.open) {
        this.open = false;
      }
      // 1、系统用户
      if(this.$store.state.user.type == this.$store.state.constants.userType_sys) {
        // 1.1 有新的待审核货源方
        if(row.type == this.$store.state.constants.wsMsg_certCompany) {
          this.bounce(this.$store.state.constants.page_companyCert);
        } else if(row.type == this.$store.state.constants.wsMsg_certDriver) {
          // 1.2 有新的待审核司机
          this.bounce(this.$store.state.constants.page_driverCert);
        } else if(row.type == this.$store.state.constants.wsMsg_certVehicle) {
          // 1.3 有新的待审核车辆
          this.bounce(this.$store.state.constants.page_vehicleCert);
        } else if(row.type == this.$store.state.constants.wsMsg_certConsult) {
          // 1.4 有新的咨询待回复
          this.bounce(this.$store.state.constants.page_consultCert)
        } else if(row.type == this.$store.state.constants.wsMsg_certComplain) {
          // 1.5 有新的投诉待回复
          this.bounce(this.$store.state.constants.page_complainCert)
        } else if (row.type == this.$store.state.constants.wsMsg_certBill) {
          // 1.6 有新的开票申请
          this.bounce(this.$store.state.constants.page_bill)
        } else if(row.type == this.$store.state.constants.wsMsg_paymentApply) {
          // 1.7 有新的支付申请
          this.bounce(this.$store.state.constants.page_payment)
        } else if(row.type == this.$store.state.constants.wsMsg_warnNew) {
          // 1.8 有新的预警
          this.bounce(this.$store.state.constants.page_warn)
        }
      } else if(this.$store.state.user.type == this.$store.state.constants.userType_company) {
        // 2、货源方用户
        // 2.1 货源方审核通过
        if(row.type == this.$store.state.constants.wsMsg_certCompany_pass) {
          this.$alert('审核通过，请重新登录', '提示', {
            confirmButtonText: '确定',
            showClose: false,
            callback: action => {
              this.$store.dispatch('LogOut').then(() => {
                location.href = '/index';
              })
            }
          });
        } else if(row.type == this.$store.state.constants.wsMsg_certCompany_fail) {
          // 2.2 货源方审核不通过
          this.$tab.refreshPage();
        } else if(row.type == this.$store.state.constants.wsMsg_orderFinish) {
          // 2.3 有新的订单完成
          this.bounce(this.$store.state.constants.page_order)
        } else if (row.type == this.$store.state.constants.wsMsg_certBillPass) {
          this.bounce(this.$store.state.constants.page_bill_pass)
        }
      }
      // 点击后消息标为已读
      this.isRead(row);
    },
    // 跳转页面
    bounce(page) {
      // 如果在当前页则刷新
      if(this.$router.currentRoute.path == page.path) {
        this.$tab.refreshPage();
      } else {
        this.$tab.openPage(page.name, page.path);
      }
    }
  }
}
</script>

<style scoped>
.is-read {
  color: #C0C4CC;
}

.content-span {
  cursor: pointer;
}
.createTime-span {
  color: #909399;
}
.createTime-fs {
  font-size: 10px;
}

.more-but {
  display: block;
  margin: 0 auto;
}
</style>
